<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>PlumGPT</title>
    <meta name="keywords" content="精选壁纸合集，手机壁纸，精美壁纸，赛博朋克风格，作品合集">
    <meta name="description" content="PlumGPT是一款基于人工智能技术的语言模型。可以进行自然语言处理、文本生成、图片生成、对话交互等多种任务，帮助人们更加高效地进行沟通和信息处理。具备强大的语言理解和生成能力，可以根据输入的文本内容进行智能回复和生成相关内容。还可以不断学习和进化，提高自己的智能水平，为用户提供更加优质的服务。">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <meta http-equiv="imagetoolbar" content="no">
    <style type="text/css">
        html {
            overflow: hidden;
        }
        body {
            position: absolute;
            margin: 0px;
            padding: 0px;
            background: #eee;
            width: 100%;
            height: 100%;
            color: #fff;
            font-family: arial;
            font-size: 0.8em;
        }
        #screen {
            position: absolute;
            width: 100%;
            height: 100%;
            background: #000;
            overflow: hidden;
        }
        #screen img, canvas {
            position: absolute;
            left: -9999px;
            cursor: pointer;
            image-rendering: optimizeSpeed;

        }
        #screen .href {
            border: #FFF dotted 1px;
        }
        #screen .fog {
            position: absolute;
            background: #fff;
            opacity: 0.1;
            filter: alpha(opacity=10);
        }
        #command {
            position:absolute;
            left: 1em;
            top: 1em;
            width: 130px;
            z-index: 30000;
            background:#000;
            border: #000 solid 1em;
        }
        #bar {
            position:relative;
            left: 1em;
            top: 1em;
            height: 160px;
        }
        #bar .button {
            position: absolute;
            background: #222;
            width: 20px;
            height: 20px;
            cursor: pointer;
        }
        #bar .loaded {
            background: #666;
        }
        #bar .viewed {
            background: #fff;
        }
        #bar .selected {
            background: #f00;
        }
        #urlInfo {
            position: absolute;
            background: url(https://plumgpt.com/chat/r.gif) no-repeat 0 4px;
            visibility: hidden;
            z-index: 30000;
            padding-left: 12px;
            cursor: pointer;
        }
    </style>

    <script type="text/javascript">
        // =============================================================
        //           ===== 3D gallery experiment =====
        // script written by Gerard Ferrandez - April 5, 2010
        // http://www.dhteumeuleu.com
        // use under a CC-BY-NC license
        // -------------------------------------------------------------
        // update: April 17 : added hyperlinks, tweaked z-index
        // =============================================================

        var m3D = function () {
            /* ---- private vars ---- */
            var diapo = [],
                imb,
                scr,
                bar,
                selected,
                urlInfo,
                camera = {x:0, y:0, z:-650, s:0, fov: 500},
                nw = 0,
                nh = 0;
            /* ==== camera tween methods ==== */
            camera.setTarget = function (c0, t1, p) {
                if (Math.abs(t1 - c0) > .1) {
                    camera.s = 1;
                    camera.p = 0;
                    camera.d = t1 - c0;
                    if (p) {
                        camera.d *= 2;
                        camera.p = 9;
                    }
                }
            }
            camera.tween = function (v) {
                if (camera.s != 0) {
                    camera.p += camera.s;
                    camera[v] += camera.d * camera.p * .01;
                    if (camera.p == 10) camera.s = -1;
                    else if (camera.p == 0) camera.s = 0;
                }
                return camera.s;
            }
            /* ==== diapo constructor ==== */
            var Diapo = function (n, img, x, y, z) {
                if (img) {
                    this.url = img.url;
                    this.title = img.title;
                    this.color = img.color;
                    this.isLoaded = false;
                    if (document.createElement("canvas").getContext) {
                        /* ---- using canvas in place of images (performance trick) ---- */
                        this.srcImg = new Image();
                        this.srcImg.src = img.src;
                        this.img = document.createElement("canvas");
                        this.canvas = true;
                        scr.appendChild(this.img);
                    } else {
                        /* ---- normal image ---- */
                        this.img = document.createElement('img');
                        this.img.src = img.src;
                        scr.appendChild(this.img);
                    }
                    /* ---- on click event ---- */
                    this.img.onclick = function () {
                        if (camera.s) return;
                        if (this.diapo.isLoaded) {
                            if (this.diapo.urlActive) {
                                /* ---- jump hyperlink ---- */
                                top.location.href = this.diapo.url;
                            } else {
                                /* ---- target positions ---- */
                                camera.tz = this.diapo.z - camera.fov;
                                camera.tx = this.diapo.x;
                                camera.ty = this.diapo.y;
                                /* ---- disable previously selected img ---- */
                                if (selected) {
                                    selected.but.className = "button viewed";
                                    selected.img.className = "";
                                    selected.img.style.cursor = "pointer";
                                    selected.urlActive = false;
                                    urlInfo.style.visibility = "hidden";
                                }
                                /* ---- select current img ---- */
                                this.diapo.but.className = "button selected";
                                interpolation(false);
                                selected = this.diapo;
                            }
                        }
                    }
                    /* ---- command bar buttons ---- */
                    this.but = document.createElement('div');
                    this.but.className = "button";
                    bar.appendChild(this.but);
                    this.but.diapo = this;
                    this.but.style.left = Math.round((this.but.offsetWidth  * 1.2) * (n % 4)) + 'px';
                    this.but.style.top  = Math.round((this.but.offsetHeight * 1.2) * Math.floor(n / 4)) + 'px';
                    this.but.onclick = this.img.onclick;
                    imb = this.img;
                    this.img.diapo = this;
                    this.zi = 25000;
                } else {
                    /* ---- transparent div ---- */
                    this.img = document.createElement('div');
                    this.isLoaded = true;
                    this.img.className = "fog";
                    scr.appendChild(this.img);
                    this.w = 300;
                    this.h = 300;
                    this.zi = 15000;
                }
                /* ---- object variables ---- */
                this.x = x;
                this.y = y;
                this.z = z;
                this.css = this.img.style;
            }
            /* ==== main 3D animation ==== */
            Diapo.prototype.anim = function () {
                if (this.isLoaded) {
                    /* ---- 3D to 2D projection ---- */
                    var x = this.x - camera.x;
                    var y = this.y - camera.y;
                    var z = this.z - camera.z;
                    if (z < 20) z += 5000;
                    var p = camera.fov / z;
                    var w = this.w * p;
                    var h = this.h * p;
                    /* ---- HTML rendering ---- */
                    this.css.left   = Math.round(nw + x * p - w * .5) + 'px';
                    this.css.top    = Math.round(nh + y * p - h * .5) + 'px';
                    this.css.width  = Math.round(w) + 'px';
                    this.css.height = Math.round(h) + 'px';
                    this.css.zIndex = this.zi - Math.round(z);
                } else {
                    /* ---- image is loaded? ---- */
                    this.isLoaded = this.loading();
                }
            }
            /* ==== onload initialization ==== */
            Diapo.prototype.loading = function () {
                if ((this.canvas && this.srcImg.complete) || this.img.complete) {
                    if (this.canvas) {
                        /* ---- canvas version ---- */
                        this.w = this.srcImg.width;
                        this.h = this.srcImg.height;
                        this.img.width = this.w;
                        this.img.height = this.h;
                        var context = this.img.getContext("2d");
                        context.drawImage(this.srcImg, 0, 0, this.w, this.h);
                    } else {
                        /* ---- plain image version ---- */
                        this.w = this.img.width;
                        this.h = this.img.height;
                    }
                    /* ---- button loaded ---- */
                    this.but.className += " loaded";
                    return true;
                }
                return false;
            }
            ////////////////////////////////////////////////////////////////////////////
            /* ==== screen dimensions ==== */
            var resize = function () {
                nw = scr.offsetWidth * .5;
                nh = scr.offsetHeight * .5;
            }
            /* ==== disable interpolation during animation ==== */
            var interpolation = function (bicubic) {
                var i = 0, o;
                while( o = diapo[i++] ) {
                    if (o.but) {
                        o.css.msInterpolationMode = bicubic ? 'bicubic' : 'nearest-neighbor'; // makes IE8 happy
                        o.css.imageRendering = bicubic ? 'optimizeQuality' : 'optimizeSpeed'; // does not really work...
                    }
                }
            }
            /* ==== init script ==== */
            var init = function (data) {
                /* ---- containers ---- */
                scr = document.getElementById("screen");
                bar = document.getElementById("bar");
                urlInfo = document.getElementById("urlInfo");
                resize();
                /* ---- loading images ---- */
                var i = 0,
                    o,
                    n = data.length;
                while( o = data[i++] ) {
                    /* ---- images ---- */
                    var x = 1000 * ((i % 4) - 1.5);
                    var y = Math.round(Math.random() * 4000) - 2000;
                    var z = i * (5000 / n);
                    diapo.push( new Diapo(i - 1, o, x, y, z));
                    /* ---- transparent frames ---- */
                    var k = diapo.length - 1;
                    for (var j = 0; j < 3; j++) {
                        var x = Math.round(Math.random() * 4000) - 2000;
                        var y = Math.round(Math.random() * 4000) - 2000;
                        diapo.push( new Diapo(k, null, x, y, z + 100));
                    }
                }
                /* ---- start engine ---- */
                run();
            }
            ////////////////////////////////////////////////////////////////////////////
            /* ==== main loop ==== */
            var run = function () {
                /* ---- x axis move ---- */
                if (camera.tx) {
                    if (!camera.s) camera.setTarget(camera.x, camera.tx);
                    var m = camera.tween('x');
                    if (!m) camera.tx = 0;
                    /* ---- y axis move ---- */
                } else if (camera.ty) {
                    if (!camera.s) camera.setTarget(camera.y, camera.ty);
                    var m = camera.tween('y');
                    if (!m) camera.ty = 0;
                    /* ---- z axis move ---- */
                } else if (camera.tz) {
                    if (!camera.s) camera.setTarget(camera.z, camera.tz);
                    var m = camera.tween('z');
                    if (!m) {
                        /* ---- animation end ---- */
                        camera.tz = 0;
                        interpolation(true);
                        /* ---- activate hyperlink ---- */
                        if (selected.url) {
                            selected.img.style.cursor = "pointer";
                            selected.urlActive = true;
                            selected.img.className = "href";
                            urlInfo.diapo = selected;
                            urlInfo.onclick = selected.img.onclick;
                            urlInfo.innerHTML = selected.title || selected.url;
                            urlInfo.style.visibility = "visible";
                            urlInfo.style.color = selected.color || "#fff";
                            urlInfo.style.top = Math.round(selected.img.offsetTop + selected.img.offsetHeight - urlInfo.offsetHeight - 5) + "px";
                            urlInfo.style.left = Math.round(selected.img.offsetLeft + selected.img.offsetWidth - urlInfo.offsetWidth - 5) + "px";
                        } else {
                            selected.img.style.cursor = "default";
                        }
                    }
                }
                /* ---- anim images ---- */
                var i = 0, o;
                while( o = diapo[i++] ) o.anim();
                /* ---- loop ---- */
                setTimeout(run, 32);
            }
            return {
                ////////////////////////////////////////////////////////////////////////////
                /* ==== initialize script ==== */
                init : init
            }
        }();

    </script>
</head>

<body>
<div id="screen">
    <div id="command">

        <h1>PLUMGPT精选合集</h1>
        如果想拥有你自己的作品进入精选，赶快
        <a href="https://plumgpt.com/" style="color: #75a99c;">点击这里跳转</a>，和我一起作图，天马行空，发挥你的想象力
        <div id="bar"></div>
    </div>
    <div id="urlInfo"></div>
</div>
<script src="jquery-3.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
    setTimeout(function() {
        $.ajax({
            type: "get",
            url: "/request/open/selected/all/img",
            dataType: 'json',
            anyc: false,
            data: {},
            success: (data)=> {
                if (data.code === 200){
                    if (data.data.length > 0) {
                        let initData = []
                        data.data.forEach((item,index)=>{
                            initData.push({
                                src:item.imgBase,
                                title: '作者：'+item.userNickname,
                                color: '#fff',
                            })
                        })
                        m3D.init(initData);
                    }
                }
            }
        })
    }, 500);
</script>
</body>
</html>
